<template>
    <div class="product">
         <div class="prod_left">
            <div style="width: 25%;height: 100%; margin-right: 20px;" v-for="(item,index) in Product.ProductsData" :key="index"> 
          <div><h3>{{ item.titles }}</h3></div>
           <div v-for="(i,j) in item.child" :key="j" style="display: flex; flex-wrap: wrap;">
            <p style="width: 100%;background: linear-gradient(to right, #f9fbff, #f0f4fd); #f6f9ff;margin: 15px 0;display: flex;">
                <svg-icon :name="i.icon"></svg-icon>
                {{ i.title }}</p>
           <div class="text" style="width: 50%;" v-for="(a,b) in i.arrs" :key="b">
           {{ a }}
          </div>
          </div>
      </div>
         </div>
         <div class="prod_right">
            <div class="prod_right_top">
               <h2>官方产品入口</h2>
               <dl style="display: flex;line-height: 20px;margin-top: 20px;">
                <dt>
                    <img src="../../../../assets/two.jpg" alt="">
                </dt>
                <dd style="margin-left: 10px;">
                    <p style="margin-bottom: 10px;font-size: 18px;">易企秀官网</p>
                    <span style="color: #ccc;">百万设计模板，适合企业使用</span>
                </dd>
               </dl>
               <dl style="display: flex;line-height: 20px;margin-top: 20px;">
                <dt>
                    <img src="../../../../assets/one.jpg" alt="">
                </dt>
                <dd style="margin-left: 10px;">
                    <p style="margin-bottom: 10px;font-size: 18px;">内容中心</p>
                    <span style="color: #ccc;">适合具有研发能力的大型企业或平台</span>
                </dd>
               </dl>
            </div>
            <div class="prod_right_bottom">
                <div style="display: flex;font-size: 18px;"> <svg-icon :name="'APP'" width="35" height="35"></svg-icon>下载APP</div>
              <div style="line-height: 25px; color: #ccc;margin-bottom: 10px;">
                <p>适合个人\商户\微商使用</p>
                <p>适用企业用户移动办公</p>
              </div>
              <img src="../../../../assets/er.jpg" alt="">
            </div>
         </div>
    </div>
</template>

<script setup lang="ts">
 
 const {Product} = defineProps({
    Product:{
        type:Object,
        default:{}
    }
 });
 

</script>

<style scoped lang="scss">
*{
    margin: 0;
    padding: 0;
}
.product{
    width: 1300px;
    height: 600px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 3px 1px #ccc;
    position: absolute;
    top: 50px;
    left: -200px;
    display: flex;
    color: #000;
    box-sizing: border-box;
    padding: 10px 30px;
    .prod_left{
        width: 1000px;
        height: 100%;
        border-right: 1px solid #ccc;
        line-height: 30px;
        display: flex;
        .text:hover{
            color: #509efd;
        }
    }
    .prod_right{
        width: 299px;
        height: 100%;
        box-sizing: border-box;
        padding: 0px 20px;
        .prod_right_top{
            width: 100%;
            height: 50%;
            border-bottom: 1px #ccc solid;
        }
        .prod_right_bottom{
            width: 100%;
            height: 50%;
        }
    }
}
</style>